<:Head>
	<title>Blog</title>
</:Head>

<Layout page='blog'>
	<h1>Recent posts</h1>

	<ul>
		{{#each posts as post}}
			<!-- we're using the non-standard `rel=prefetch` attribute to
			     tell Sapper to load the data for the page as soon as
			     the user hovers over the link or taps it, instead of
			     waiting for the 'click' event -->
			<li><a rel='prefetch' href='/blog/{{post.slug}}'>{{post.title}}</a></li>
		{{/each}}
	</ul>
</Layout>

<style>
	ul {
		margin: 0 0 1em 0;
		line-height: 1.5;
	}
</style>

<script>
	import Layout from '../_components/Layout.html';

	export default {
		components: {
			Layout
		},

		preload({ params, query }) {
			return fetch(`/api/blog`).then(r => r.json()).then(posts => {
				return { posts };
			});
		}
	};
</script>